<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<script src="../js/common.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

<style>
  .el-header {
    margin-bottom: 20px;
  }

</style>

<!-- 模型一 -->
<div id="httpUtil">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >工具</el-breadcrumb-item>
        <el-breadcrumb-item>接口工具</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main v-loading="dataLoading">
      <div style="margin:4% 15%;">
        <el-form :model="ruleForm"  ref="ruleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="接口:" >
            <el-col :span="spanData">
              <el-input v-model="ruleForm.url" clearable placeholder="请求地址"></el-input>
            </el-col>

            <el-col :span="2" style="margin-left: 20px;">
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item  label="参数:" >
            <el-col :span="spanData">
              <el-input v-model="ruleForm.parameter" clearable placeholder="参数"></el-input>
            </el-col>
            <el-col :span="2" style="margin-left: 20px;">
              <el-button type="primary" @click="requestTest('ruleForm')">请求</el-button>
            </el-col>
            
          </el-form-item>

        </el-form>
        <el-input type="textarea" v-model="resultData"></el-input>
      </div>

    </el-main>
  </el-container>
</div>


<script>

  var httpUtil = new Vue({
  el: '#httpUtil',
  data() {
      return {
        ruleForm: {
          url: '',
          parameter: '',
        },
        spanData:15,
        // 请求类型
        options: [{
          value: '0',
          label: 'get'
        }, {
          value: '1',
          label: 'post'
        }],
        value: '0',
        //结果
        resultData:"",
        dataLoading:false,
      };
    },
    methods: {
      requestTest(formName) {
        this.$refs[formName].validate((valid) => {

          if (valid) {
            // axios.get(this.ruleForm.url).then(res =>{
            //   alert(res)
            // }).catch(error => {
            //   alert(error)
            // })

            axios.get(httpUtil.ruleForm.url, "",
              function(data){
                alert("Data Loaded: " + data);
              });
            
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
})
  
</script>